iT邦幫忙

DAY 9
1

菜逼八的 Android 開發 30天系列 第 9

【菜逼八學Android】輕鬆做出轉場動畫 TransitionManager

  • 分享至 

  • xImage
  •  

這個 TransitionManager (轉場管理器)是在Android API Level 19時候加入的新功能,
我們可以在兩個Layout中之間轉跳,並且在中間做一個華麗的過場動畫,
只要簡單設定起始場景、結束場景、使用的轉場,
之後再從Activity中呼叫,就完成啦!

Step1. 建立一個轉場用的設定

首先我們要在transition資料夾底下,建立一個transition_scene1.xml,
然後將我們想要有的效果寫進去,這邊的fade_in與fade_out分別是淡入淡出的意思,
interpolator放的是anim動畫,有非常多可以選擇,大家可以看這邊來試試看每一個效果哦
http://developer.android.com/reference/android/R.anim.html#accelerate_decelerate_interpolator

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
    android:transitionOrdering="sequential" >

    <fade
        android:duration="1000"
        android:fadingMode="fade_out" />

    <changeBounds
        android:duration="2000"
        android:interpolator="@android:interpolator/anticipate_overshoot" />

    <fade
        android:duration="1000"
        android:fadingMode="fade_in" />

</transitionSet>

Step2. 建立兩個Layout

在這邊,我分別建立兩個Layout,一個是預設建立的activity_main.xml,
另一個是transition_scen1.xml,裡面分別放入不同的東西(可以隨便放),
這邊要記得幫activity_main的Layout取一個ID:container,
在Activity_main中,建立一個Button,測試轉場用

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical"
              android:id="@+id/container" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="轉場測試"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按我一下"
        android:onClick="button1_Click"/>

</LinearLayout>

Step3. 建立TransitionManager

在transition資料夾底下建立一個transition_manager.xml,
把我們剛剛的兩個場景,還有動畫,通通寫入TransitionManager中~

<transitionManager xmlns:android="http://schemas.android.com/apk/res/android">
    <transition android:fromScene="@layout/activity_main"
                android:toScene="@layout/transition_scene1"
                android:transition="@transition/slow_auto_transition"/>
</transitionManager>

Step4. 呼叫轉場

在預設建立的MainActivity的onCreate中呼叫轉場動畫,再將轉場動畫塞入container,
點擊Button的時候動畫就會開始執行囉!

public class MainActivity extends Activity {

	private TransitionManager manager;
	private Scene scene1;

	@Override
	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		ViewGroup container = (ViewGroup) findViewById(R.id.container);
		TransitionInflater transitionInflater = TransitionInflater.from(this);
		manager = transitionInflater.inflateTransitionManager(
				R.transition.transition_manager, container);
		scene1 = Scene.getSceneForLayout(container, R.layout.transition_scene1,
				this);
	}

	public void button1_Click(View view) {
		manager.transitionTo(scene1);
	}
}

這樣就完成了我們今天的練習了~謝謝大家~我們明天見~~

後記:今天忙到我差點趕不出文章來,也來不及整理完成圖(原因是因為我不知道怎麼貼會動的圖)
,關於動畫的設定我只有稍微看一下官方文件,還沒有深入了解,
所以就大概看一下,如果研究完有什麼心得再告訴大家


上一篇
【菜逼八學Android】偏好設定的PreferenceFragment(2)
下一篇
【菜逼八學Android】來一顆有質感的鈕~Style設定
系列文
菜逼八的 Android 開發 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言